import React, { Component } from "react";
import Child8 from "../components/Child8";
import AxiosContext from "../Context/AxiosContext";

export default class Life extends Component {
  static contextType = AxiosContext;
  constructor(props) {
    super(props); //只是为了在外部可以用this.props
    this.state = {
      num: 10,
      info:{},//对象
      timer:null,
    };
    console.log(1);
  }
  async componentDidMount() {
    console.log(document.getElementById("abc"));
    console.log(this.refs.efg);
    console.log(3);
    let res = await this.context.axios({
      method: "get",
      url: "http://localhost:2345/userinfo",
    });
    console.log(res);


    this.setState({
        info:{
            item:{age:18}
        }
    })
    // this.state.timer = setInterval(()=>{
    //     this.setState({
    //         num:this.state.num+1
    //     })
    // },1000)
  }
  componentDidUpdate(prevProps,prevState) {
    console.log(4);
    console.log(prevState);
    //this.setState(); 不能调用
  }
  componentDidCatch(err){
    console.log(err);
  }
  componentWillUnmount() {
    console.log(5);
    clearInterval(this.state.timer);//销毁定时器
  }
  change = () => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  render() {
    console.log(2);

    return (
      <div>
        <h3>生命周期</h3>
        <div id="abc" ref="efg">
          显示数据 {this.state.num}
        </div>
        <button
          onClick={() => {
            this.change();
          }}
        >
          修改
        </button>
        <Child8 num={this.state.num} info={this.state.info}></Child8>
      </div>
    );
  }
}
